<template>
  <div class="widget_settings_pro">
    <ele-form-section
        v-model="formData"
        :request-fn="handleSubmit"
        :sections="sections"
        @request-success="handleSuccess"
    >
      <template v-slot:blocks="{ desc, data, field, formData }">
        <el-collapse v-model="activeNames">
          <draggable v-model="formData.templateBlockList" chosenClass="active" animation="500" filter=".forbid"
                     :preventOnFilter="false">
            <template v-for="(item, index) in formData.templateBlockList">
              <el-collapse-item :title="item.settings.type === 'video' ? '视频' : '图片'" :name="index"
                                class="game-select editForm" :key="index">
                <template slot="title">
                  <div class="custom-title" v-if="item.settings.type !== 'video'">
                    <svg-icon icon-class="grid" class="icon"></svg-icon>
                    <img :src="item.settings.src" style="height: 30px" v-if="item.settings.src">
                  </div>
                  <span>{{ item.settings.type === 'video' ? '视频' : '图片' }}</span>
                </template>
                <div class="form-item forbid">
                  <label>轮播素材类型</label>
                  <el-select v-model="item.settings.type">
                    <el-option value="image" label="图片"></el-option>
                    <el-option value="video" label="视频"></el-option>
                  </el-select>
                </div>
                <div v-if="item.settings.type === 'video'"
                     style="padding: 6px;margin-top:10px;margin-bottom: 10px;">
                  <div class="form-item forbid">
                    <label>PC端视频</label>
                    <upload-file accept="video/mp4,video/quicktime,video/x-msvideo"
                                 :fileType="['mp4', 'mov', 'avi']"
                                 :isVideo="true"
                                 type="file"
                                 :fileSize="50"
                                 :isShowTip="true"
                                 :lazy="true"
                                 :responseFn="handleResponse"
                                 :action="uploadPath"
                                 title="视频"
                                 v-model="item.settings.src"
                    ></upload-file>
                    <p class="desc">视频大小不能超过50M</p>
                  </div>
                  <div class="form-item forbid">
                    <label>移动端端视频</label>
                    <upload-file accept="video/mp4,video/quicktime,video/x-msvideo"
                                 :fileType="['mp4', 'mov', 'avi']"
                                 :isVideo="true"
                                 type="file"
                                 :fileSize="50"
                                 :isShowTip="true"
                                 :lazy="true"
                                 :responseFn="handleResponse"
                                 :action="uploadPath"
                                 title="视频"
                                 v-model="item.settings.mobile_src"
                    ></upload-file>
                    <p class="desc">视频大小不能超过50M</p>
                  </div>
                </div>
                <div v-else>
                  <div class="form-item forbid">
                    <label>PC端图片</label>
                    <ele-form-upload-plus-file v-model="item.settings.src" title="PC图片"/>
                    <p class="desc">如果您选择自适应，建议尺寸（宽*高）：1920*667px</p>
                  </div>
                  <div class="form-item forbid">
                    <label>移动端图片</label>
                    <ele-form-upload-plus-file v-model="item.settings.mobile_src" title="移动端图片"/>
                    <p class="desc">如果您选择自适应，建议尺寸（宽*高）：750*918px</p>
                  </div>
                </div>
                <div class="form-item forbid">
                  <label>按钮文字</label>
                  <el-input type="text" v-model="item.settings.button_label"></el-input>
                </div>
                <div class="form-item forbid">
                  <label>按钮链接</label>
                  <ele-form-custom-select v-model="item.settings.button_link"/>
                </div>
                <div class="form-item forbid el-form-item">
                  <label>按钮背景色</label>
                  <el-color-picker
                      v-model="item.settings.button_bg_color"
                      :predefine="predefineColors">
                  </el-color-picker>
                </div>
                <div class="form-item forbid el-form-item">
                  <label>按钮文字色</label>
                  <el-color-picker
                      v-model="item.settings.button_text_color"
                      :predefine="predefineColors">
                  </el-color-picker>
                </div>
                <div class="form-item forbid el-form-item">
                  <label>按钮边框颜色</label>
                  <el-color-picker
                      v-model="item.settings.button_border_color"
                      :predefine="predefineColors">
                  </el-color-picker>
                </div>
                <div class="form-item forbid el-form-item">
                  <label>按钮Hover颜色</label>
                  <el-color-picker
                      v-model="item.settings.button_hover_color"
                      :predefine="predefineColors">
                  </el-color-picker>
                </div>
                <div class="form-item forbid el-form-item">
                  <label>按钮Hover边框颜色</label>
                  <el-color-picker
                      v-model="item.settings.button_hover_border_color"
                      :predefine="predefineColors">
                  </el-color-picker>
                </div>
                <div class="form-item forbid el-form-item">
                  <label>按钮Hover字体颜色</label>
                  <el-color-picker
                      v-model="item.settings.button_hover_text_color"
                      :predefine="predefineColors">
                  </el-color-picker>
                </div>
                <div class="form-item forbid">
                  <label>蒙层不透明度</label>
                  <el-slider v-model="item.settings.opacity">
                  </el-slider>
                </div>
                <div class="form-item forbid">
                  <label>图片截取位置</label>
                  <el-select v-model="item.settings.alignment">
                    <el-option value="top" label="上"></el-option>
                    <el-option value="center" label="中"></el-option>
                    <el-option value="bottom" label="下"></el-option>
                  </el-select>
                </div>
                <div class="form-item forbid">
                  <label>文字&按钮位置</label>
                  <el-select v-model="item.settings.text_position">
                    <el-option value="center_left" label="中左"></el-option>
                    <el-option value="center" label="中"></el-option>
                    <el-option value="center_right" label="中右"></el-option>
                    <el-option value="center_bottom" label="中下"></el-option>
                  </el-select>
                </div>
                <div class="form-item forbid">
                  <label>文字对齐位置</label>
                  <el-select v-model="item.settings.text_alignment_position">
                    <el-option value="text_left" label="左对齐"></el-option>
                    <el-option value="text_center" label="中"></el-option>
                    <el-option value="text_right" label="右对齐"></el-option>
                  </el-select>
                </div>
                <div class="form-item forbid el-form-item">
                  <label>标题&副标题颜色</label>
                  <el-color-picker
                      v-model="item.settings.text_color"
                      :predefine="predefineColors">
                  </el-color-picker>
                </div>
                <div class="form-item forbid">
                  <label>标题</label>
                  <el-input type="text" v-model="item.settings.title"></el-input>
                </div>
                <div class="form-item forbid">
                  <label>副标题</label>
                  <el-input type="text" v-model="item.settings.sub_title"></el-input>
                </div>
                <div class="form-item forbid">
                  <label>两图公用链接</label>
                  <ele-form-custom-select v-model="item.settings.url"/>
                </div>
                <div class="form-item forbid">
                  <el-button v-if="index !== 0" class="addBtn" @click="handleRemove(index)"><i
                      class="el-icon-remove"></i>删除内容
                  </el-button>
                </div>
              </el-collapse-item>
            </template>
          </draggable>
        </el-collapse>
        <el-button type="primary" size="small" class="addBtn" @click="addPic"><i class="el-icon-plus"></i>添加图片
        </el-button>
      </template>
      <template v-slot:form-btn="{ btns }">
        <div class="rest-btn" @click="reset">
          <svg-icon icon-class="reset-settings"></svg-icon>
          重置配置
        </div>
      </template>
    </ele-form-section>
  </div>
</template>

<script>
import draggable from 'vuedraggable';
import {debounce, deepClone} from '@/utils/utils';
import uploadFile from '_c/Upload/uploadFile.vue';

export default {
    name: 'slideForm',
    components: {draggable, uploadFile},
    props: {
        value: {
            type: Object,
            default: () => ({})
        }
    },
    watch: {
        value: {
            handler (newVal, oldVal) {
                this.formData = JSON.parse(newVal.styleJson);
            },
            immediate: false,
            deep: true
        },
        formData: {
            handler (newVal, oldVal) {
                this.pageCount++;
                if (this.pageCount !== 1) {
                    this.setData();
                }
            },
            immediate: false,
            deep: true
        }
    },
    data () {
        return {
            uploadPath: process.env.VUE_APP_BASE_API + '/upload-file',
            pageCount: 1,
            activeNames: [],
            formData: this.value ? JSON.parse(this.value.styleJson) : {},
            sections: [
                {
                    // 分区标题
                    title: '轮播规则',
                    // 分区表单项
                    // 和group不同，仅将vue-ele-form的formDesc放入section中
                    formDesc: {
                        'is_auto_play': {
                            label: '自动轮播',
                            break: true,
                            type: 'switch'
                        },
                        delay: {
                            type: 'select',
                            label: '轮播时间',
                            options: [
                                {text: '2s', value: '2000'},
                                {text: '3s', value: '3000'},
                                {text: '5s', value: '5000'}
                            ]
                        },
                        'img_height': {
                            type: 'select',
                            label: '图片高度',
                            options: [
                                {text: '自适应', value: 'normal'},
                                {text: '大（PC:600px，移动：460px）', value: 'large'},
                                {text: '中（PC:450px，移动：325px）', value: 'medium'},
                                {text: '小（PC:300px，移动：200px）', value: 'small'},
                                {text: '超小（PC:200px，移动：150px）', value: 'x-small'}
                            ]
                        },
                        text_font_size: {
                            type: 'slider',
                            label: () => { return `标题大小  ${this.formData['text_font_size']}`; },
                            attrs: {
                                min: 14,
                                max: 60
                            }
                        },
                        sub_text_font_size: {
                            type: 'slider',
                            label: () => { return `副标题大小  ${this.formData['sub_text_font_size']}`; },
                            attrs: {
                                min: 14,
                                max: 60
                            }
                        },
                        text_font_mobile_size: {
                            type: 'slider',
                            label: () => { return `移动端标题大小  ${this.formData['text_font_mobile_size']}`; },
                            attrs: {
                                min: 14,
                                max: 60
                            }
                        },
                        sub_text_font_mobile_size: {
                            type: 'slider',
                            label: () => { return `移动端副标题大小  ${this.formData['sub_text_font_mobile_size']}`; },
                            attrs: {
                                min: 14,
                                max: 60
                            }
                        },
                        // 'text_size': {
                        //     type: 'select',
                        //     label: '文字大小',
                        //     options: [
                        //         {text: '大', value: 'large'},
                        //         {text: '中', value: 'medium'},
                        //         {text: '小', value: 'small'}
                        //     ]
                        // },
                        'is_full_width': {
                            type: 'switch',
                            break: true,
                            label: '宽度铺满屏幕'
                        },
                        // 'show_bottom_margin': {
                        //     type: 'switch',
                        //     label: '显示下边距'
                        // },
                        'blocks': {}
                    }
                }
            ],
            predefineColors: [
                '#ff4500',
                '#ff8c00',
                '#ffd700',
                '#90ee90',
                '#00ced1',
                '#1e90ff',
                '#c71585',
                'rgba(255, 69, 0, 0.68)',
                'rgb(255, 120, 0)',
                'hsv(51, 100, 98)',
                'hsva(120, 40, 94, 0.5)',
                'hsl(181, 100%, 37%)',
                'hsla(209, 100%, 56%, 0.73)'
            ]
        };
    },
    mounted () {
        if (!('text_font_size' in this.formData)) {
            this.$set(this.formData, 'text_font_size', 32);
        }
        if (!('sub_text_font_size' in this.formData)) {
            this.$set(this.formData, 'sub_text_font_size', 16);
        }
        if (!('text_font_mobile_size' in this.formData)) {
            this.$set(this.formData, 'text_font_mobile_size', 32);
        }
        if (!('sub_text_font_mobile_size' in this.formData)) {
            this.$set(this.formData, 'sub_text_font_mobile_size', 16);
        }
        const d = this.formData.templateBlockList;
        d.forEach(s => {
            if (!s.settings.text_alignment_position) {
                this.$set(s.settings, 'text_alignment_position', 'text_right');
            }
            if (!s.settings.button_border_color) {
                this.$set(s.settings, 'button_border_color', '#ffffff');
            }
            if (!s.settings.button_hover_color) {
                this.$set(s.settings, 'button_hover_color', '#000');
            }
            if (!s.settings.button_hover_border_color) {
                this.$set(s.settings, 'button_hover_border_color', '#000');
            }
            if (!s.settings.button_hover_text_color) {
                this.$set(s.settings, 'button_hover_text_color', '#fff');
            }
            if (!s.settings.type) {
                this.$set(s.settings, 'type', 'image');
            }
        });
    },
    methods: {
        handleResponse (response, file, fileList) {
            return response;
        },
        addPic () {
            const params = deepClone(this.formData.defaultBlockList[0]);
            this.formData.templateBlockList.push(params);
        },
        handleSubmit (data) {
            console.log(data);
            return Promise.resolve();
        },
        handleSuccess () {
            this.$message.success('创建成功');
        },
        reset () {
            this.pageCount = 0;
            this.$emit('resetData', this.value);
        },
        handleRemove (index) {
            this.formData.templateBlockList.splice(index, 1);
        },
        setData: debounce(function () {
            let data = deepClone(this.value);
            data.styleJson = JSON.stringify(this.formData);
            this.$store.commit('SET_PROJECT_DATA', data);
        }, 600)
    }
};
</script>

<style scoped lang="scss">
.form-item-inline {
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 10px;
  color: #606266;
  height: 32px;
  margin-bottom: 10px;
}

.editForm {
  margin-bottom: 10px;

  .form-item {
    margin-top: 10px;

    label {
      display: block;
      height: 32px;
      line-height: 32px;
    }

    .desc {
      color: #666666;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400;
      text-transform: initial;
      word-wrap: break-word;
      word-break: break-word;
      margin-top: 10px;
      margin-bottom: 10px;
      display: block;
      clear: both;
    }
  }

  ::v-deep .el-collapse-item__content {
    border: 1px solid #d8deec;
    border-top: 0;
    padding-left: 10px;
  }
}

.addBtn {
  width: 100%;
}
.custom-title{
  display: flex;
  align-items: center;
  .icon, img{
    margin-right: 6px;
  }
}
</style>
